<template>
    <div class="categories">
        <el-button type="primary" @click="openadd">添加分类</el-button>
        <!-- 表格 -->
        <el-table :data="tableData" style="width: 100%;margin-bottom: 20px;" row-key="cat_id" border
            :tree-props="{ children: 'children', hasChildren: 'hasChildren', value: 'cat_name' }">
            <el-table-column prop="cat_name" label="姓名" sortable width="180">
            </el-table-column>
            <el-table-column prop="cat_deleted" label="是否有效">
                <template slot-scope="scope">
                    <i :class="scope.row.cat_deleted ? 'el-icon-circle-check' : 'el-icon-circle-close'"></i>
                </template>
            </el-table-column>
            <el-table-column prop="cat_level" label="排序">
                <template slot-scope="scope">
                    <el-tag v-if="scope.row.cat_level == 0 ? true : false" size="mini">一级</el-tag>
                    <el-tag v-if="scope.row.cat_level == 1 ? true : false" size="mini" type="success">二级</el-tag>
                    <el-tag v-if="scope.row.cat_level == 2 ? true : false" size="mini" type="warning">三级</el-tag>
                </template>
            </el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button size="mini" type="primary" icon="el-icon-edit" @click="handleEdit(scope.row)">编辑</el-button>
                    <el-button size="mini" icon="el-icon-delete" type="danger"
                        @click="handleDelete(scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <!-- 对话框 -->
        <el-dialog title="收货地址" :visible.sync="dialogFormVisible">
            <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                <el-form-item label="分类名称" prop="cat_name">
                    <el-input v-model="ruleForm.cat_name"></el-input>
                </el-form-item>
                <el-form-item label="父级分类" prop="name" v-if="editid ? false : true">
                    <el-cascader v-model="value" :options="tableData1"
                        :props="{ expandTrigger: 'hover', label: 'cat_name', value: 'cat_id' }"
                        @change="handleChange"></el-cascader>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="submitForm('ruleForm')">确认</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
        <!-- 分页 -->
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pagenum"
            :page-sizes="[2, 4, 6, 10]" :page-size="pagesize" layout="total, sizes, prev, pager, next, jumper"
            :total="total">
        </el-pagination>
    </div>
</template>
<script>
import { getCategoriesList, getaddCategories, editCategories, deleteCategories } from '../../utlis/api/shops/shopapi'
export default {
    data() {
        return {
            tableData: [],
            tableData1: [],
            pagenum: 1,
            pagesize: 2,
            total: 0,
            type: 2,
            dialogFormVisible: false,
            ruleForm: {
                cat_name: "",
            },
            rules: {
                cat_name: [
                    { required: true, message: '请输入活动名称', trigger: 'blur' }
                ]
            },
            value: "",
            pid: 0,
            val: '',
            editid: ''
        }
    },
    methods: {
        getCategories() {
            getCategoriesList({ pagenum: this.pagenum, pagesize: this.pagesize }).then((res) => {
                console.log(res);
                this.tableData = res.data.data.result
                this.total = res.data.data.total
            })
            getCategoriesList({ pagenum: this.pagenum, pagesize: this.pagesize, type: 2 }).then((res) => {
                console.log(res);
                this.tableData1 = res.data.data.result
                // this.total = res.data.data.total
            })
        },
        handleEdit(row) {
            this.dialogFormVisible = true
            this.editid = row.cat_id
            this.ruleForm = row
        },
        handleDelete(row) {
            console.log(91, row.cat_id);
            deleteCategories({ id: row.cat_id }).then((res) => {
                console.log(92, res);
                this.getCategories()
            })
        },
        openadd() {
            this.dialogFormVisible = true
            this.editid = ''
            this.ruleForm = {}
        },
        submitForm(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    if (this.editid) {
                        editCategories({ id: this.editid, cat_name: this.ruleForm.cat_name }).then(res => {
                            console.log(101, res);
                            this.getCategories()
                            this.dialogFormVisible = false
                        })
                    } else {
                        getaddCategories({
                            cat_pid: this.pid, cat_level: this.val,
                            cat_name: this.ruleForm.cat_name
                        }).then((res) => {
                            console.log(101, res);
                            this.getCategories()
                            this.dialogFormVisible = false
                        })
                    }
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },
        handleSizeChange(val) {
            this.pagesize = val
            this.getCategories()
        },
        handleCurrentChange(val) {
            this.pagenum = val
            this.getCategories()
        },
        handleChange(value) {
            console.log(value);
            this.pid = value[value.length - 1]
            this.val = value.length - 1
        }
    },
    created() {
        this.getCategories()
    }
}
</script>
<style lang="scss" scoped></style>